<template>
  <div class="filter">
    <div class="filter_item">
      商品名字：<Input
        v-model="goodName"
        show-word-limit
        style="width: 300px"
      />
    </div>
    <div class="filter_item">
      商品单价：<Input
        v-model="priceBegin"
        style="width: 70px"
      />———<Input
        v-model="priceEnd"
        style="width: 70px"
      />
    </div>
    <div class="filter_item">
      购买数量：<Input
        v-model="numberBegin"
        style="width: 70px"
      />———<Input
        v-model="numberEnd"
        style="width: 70px"
      />
    </div>
    <div class="filter_item">
      购买时间：<DatePicker
        type="daterange"
        placeholder="请选择订购时间点"
        @on-change="bookChange"
        style="width: 200px"
      ></DatePicker>
    </div>
    <div class="filter_item">
      <Button type="primary" @click="showAddModal">录入</Button>
    </div>
    <div class="filter_item">
      <Button type="primary" @click="getAllGood">查询</Button>
    </div>
    <div class="filter_item">
      <div class="table">
        <Table
          ref="table"
          :columns="goodColums"
          :data="goodList"
          border
        ></Table>
      </div>
      <div class="page">
        <Page :total="total" @on-change="pageChange" show-elevator />
      </div>
          <Modal
      v-model="showAddGoodModel"
      title="新增"
      width="1300"
      :closable="false"
      :mask-closable="false"
    >
      <AddGood ref="AddGood" @on-close-modal="closeModal" />
      <div slot="footer">
        <Button @click="closeAddModal">取消</Button>
        <Button type="primary" @click="closeAddModal">确定</Button>
      </div>
    </Modal>
    <Modal
    </div>
  </div>
</template>

<script>
import axios from "axios";
import AddGood from "./AddGood"
export default {
  name: "Good",
  components:{AddGood},
  data() {
    return {
      goodName: "",
      priceBegin:0,
      priceEnd:0,
      book:[],
      numberBegin:0,
      numberEnd:0,
      goodList: [],
      pageNo:1,
      total:0,
      goodColums:[
       {
          type: "index",
          title: "序号",
          align: "center",
          width: 80,
        },
        {
          key: "goodName",
          title: "商品名字",
          align: "center",
        },
        {
          key: "goodPrice",
          title: "单价",
          align: "center",
        },{
          key: "goodNumber",
          title: "数量",
          align: "center",
        },{
          key: "priceSum",
          title: "总价格",
          align: "center",
        },
        {
          key: "book",
          title: "订购时间",
          align: "center",
        },
      ],
      showAddGoodModel:false,
    };
  },
  methods: {
    getAllGood() {
      axios
        .post("/api/good/getAllGood", {
          goodName: this.goodName?this.goodName:null,
          priceBegin: this.priceBegin ? this.priceBegin : null,
          priceEnd: this.priceEnd ? this.priceEnd : null,
          bookBegin: this.book[0] ? this.book[0] : null,
          bookEnd: this.book[0] ? this.book[1] : null,
          numberBegin:this.numberBegin?this.numberBegin:null,
          numberEnd:this.numberEnd?this.numberEnd:null,
          pageNo:this.pageNo,
        })
        .then((res) => {
          let data  = res.data.data;
          console.log(data);
          this.goodList = data.pageList;
          this.total = data.recordCount;
        });
    },
    pageChange(e){
      this.pageNo = e;
      this.getAllGood();
    },
    bookChange(e){
      this.book = e;
    },
    closeModal(e){
      this.showAddGoodModel = e;
    },
    closeAddModal(){
      this.showAddGoodModel = false;
    },
    showAddModal(){
      this.showAddGoodModel = true;
    }
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item {
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
.table {
  margin-top: 30px;
  width: 1260px;
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>